<template>
	<view class="container">
		<!-- 我的 -->
		<view class="bgcolor">
			<view class="user-info">
				<image :src="avatorSrc" class="user-avator" @click="goto('/minepkg/user_info/user_info')"></image>
				<view class="info-box">
					<text class="user-name">用户名称</text>
					<!-- <text class="user-id">{{userInfo.userId}}</text> -->
					<text class="user-id">123456</text>
				</view>
			</view>
		</view>

		<view class="user-feature-list">
			<view class="user-feature-list-item" @click="goto('/minepkg/public_building/public_building')">
				<image src="../../static/mine_icons/building.png" class="icon"></image>
				<text class="user-service-name">公建芯造</text>
				<image src="/static/mine_icons/left.png" class="left-icon"></image>
			</view>
			<view class="user-feature-list-item">
				<image src="../../static/mine_icons/house.png" class="icon"></image>
				<text class="user-service-name">房屋芯造</text>
				<image src="/static/mine_icons/left.png" class="left-icon"></image>
			</view>
			<view class="user-feature-list-item" @click="goto('/minepkg/customer_service/customer_service')">
				<image src="../../static/mine_icons/service.png" class="icon"></image>
				<text class="user-service-name">客服中心</text>
				<image src="/static/mine_icons/left.png" class="left-icon"></image>
			</view>
			<view class="user-feature-list-item" @click="goto('/minepkg/change_pwd/change_pwd')">
				<image src="../../static/mine_icons/pwd.png" class="icon"></image>
				<text class="user-service-name">修改密码</text>
				<image src="/static/mine_icons/left.png" class="left-icon"></image>
			</view>
		</view>
		<view class="follow-me">
			<image src="/static/login_form_icons/logo.png" class="logo"></image>
			<view class="content">
				<text class="name">公众号名称：</text>
				<text class="summary">公众号简介</text>
			</view>
			<button type="default" class="follow">关注</button>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			
		},
		onReady() {
			this.getUserInfo()
		},
		onShow() {
			this.getAvator()
		},
		data() {
			return {
				userInfo: {},
				avatorSrc: ''
			};
		},
		methods: {
			getAvator() {
				this.avatorSrc =  uni.getStorageSync('avator')
				console.log(this.avatorSrc)

			},
			async getUserInfo() {
				const {
					data: res
				} = await uni.$http.get(uni.$http.baseURL + '/user/getUserInfo')
				if (res.message === '成功') {
					this.userInfo = res.body
					uni.setStorageSync('avator', res.body.headerUrl)
					uni.setStorageSync('phone', res.body.phone)
					uni.setStorageSync('userId', res.body.userId)
					uni.setStorageSync('userName', res.body.userName)
					console.log("获取用户信息成功")
				}

			},
			goto(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
	}

	.bgcolor {
		width: 100%;
		background-color: #E43D33;
	}

	.user-info {
		display: flex;
		margin-top: 28rpx;
		margin-left: 28rpx;
		flex-direction: row;

		.user-avator {
			width: 124rpx;
			height: 124rpx;
			border-radius: 80rpx;
		}

		.info-box {
			display: flex;
			flex-direction: column;
			margin-top: 26rpx;
			margin-left: 21rpx;
			text-align: left;
			color: #FFFFFF;
			font-weight: 500;

			.user-name {
				font-size: 32rpx;
			}

			.user-id {
				font-size: 28rpx;
			}
		}

	}

	.user-feature-list {
		background: #FFFFFF;
		border: 5rpx solid #EBEEF5;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		margin: 44rpx 30rpx 0 30rpx;

		.user-feature-list-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 100rpx;
			border-bottom: 1rpx solid #efefef;

			.icon {
				margin-left: 30rpx;
				width: 40rpx;
				height: 40rpx;
			}

			.user-service-name {
				margin-left: 35rpx;
			}

			.left-icon {
				margin-left: 400rpx;
				height: 28rpx;
				width: 16rpx;
			}
		}
	}

	.follow-me {
		height: 200rpx;
		background: #FFFFFF;
		margin: 20rpx 30rpx 0 30rpx;
		border-radius: 20rpx;
		border: 2rpx solid #efefef;
		display: flex;
		flex-direction: row;
		height: 200rpx;
		align-items: center;

		.logo {
			margin-left: 35rpx;
			width: 89rpx;
			height: 109rpx;
		}

		.content {
			display: flex;
			flex-direction: column;
			margin-left: 60rpx;
			color: #333333;

			.name {
				align-items: flex-start;
				font-size: 30rpx;
				font-weight: bold;
			}

			.summary {
				align-items: flex-end;
				font-size: 24rpx;
				font-weight: 500;
			}

		}

		.follow {
			font-size: 24rpx;
			font-weight: 500;
			margin-right: 20rpx;
			width: 120rpx;
			color: #FFFFFF;
			background: linear-gradient(90deg, #E93423 0%, #FB6858 100%);
			border-radius: 22rpx;
		}
	}
</style>
